<template>
  <div class="contentthree">
     <div style="height: 8%;width: 100%;background:url(../../static/title.png);background-size: cover;">
       <div style="font-size: 34px;color: #FFFFFF;padding-top: 16px;width: 100%;text-align: center;">问卷调查大数据屏</div>
       <el-select v-model="value"  style="position: absolute;right: 1%;top: 30px;width: 80px;">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
     </div>
     <div style="height: 91%;margin-top: 4px;width: 100%;">
       <div style="width: 100%;height: 60%;display: flex;">
         <div style="width: 20%;height: 100%;position: relative;">
           <dv-border-box-9 :color="['#2d5cac']"></dv-border-box-9>
           <!-- '#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF' -->
          <div style="display: flex;flex-direction: column;position:absolute;top:9%;left: 8%;width: 85%;height: 84%;">
            <div style="width: 100%;height: 31%;background-color: #73ACFF55;display: flex;">
              <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;">
                <img src="../../static/t_info_1.png" style="width: 40px;height: 40px;" />
                <div style="display: flex;flex-direction: column;margin-left: 20px;">
                  <div style="color: #fff;">调查人数</div>
                  <div style="color: #ffff43;font-size: 28px;font-weight: bold;">999</div>
                </div>
              </div>
              <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;">
                <img src="../../static/t_info_2.png" style="width: 40px;height: 40px;" />
                <div style="display: flex;flex-direction: column;margin-left: 20px;">
                  <div style="color: #fff;">调查人数</div>
                  <div style="color: #ffff43;font-size: 28px;font-weight: bold;">999</div>
                </div>
              </div>
            </div>
            <div style="width: 100%;height: 31%;background-color: #9E87FF55;margin-top: 5.33%;display: flex;">
              <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;">
                <img src="../../static/t_info_3.png" style="width: 40px;height: 40px;" />
                <div style="display: flex;flex-direction: column;margin-left: 20px;">
                  <div style="color: #fff;">调查人数</div>
                  <div style="color: #2ebbc2;font-size: 28px;font-weight: bold;">999</div>
                </div>
              </div>
              <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;">
                <img src="../../static/t_info_4.png" style="width: 40px;height: 40px;" />
                <div style="display: flex;flex-direction: column;margin-left: 20px;">
                  <div style="color: #fff;">调查人数</div>
                  <div style="color: #2ebbc2;font-size: 28px;font-weight: bold;">999</div>
                </div>
              </div>
            </div>
            <div style="width: 100%;height: 31%;background-color: #FDD56A55;margin-top: 5.33%;display: flex;">
              <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;">
                <img src="../../static/t_info_5.png" style="width: 40px;height: 40px;" />
                <div style="display: flex;flex-direction: column;margin-left: 20px;">
                  <div style="color: #fff;">调查人数</div>
                  <div style="color: #ff4e4e;font-size: 28px;font-weight: bold;">999</div>
                </div>
              </div>
              <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;">
                <img src="../../static/t_info_6.png" style="width: 40px;height: 40px;" />
                <div style="display: flex;flex-direction: column;margin-left: 20px;">
                  <div style="color: #fff;">调查人数</div>
                  <div style="color: #ff4e4e;font-size: 28px;font-weight: bold;">999</div>
                </div>
              </div>
            </div>
          </div>
         </div>
            <div style="width: 50%;height: 100%;position: relative;">
              <dv-border-box-9 :color="['#2d5cac']"></dv-border-box-9>
              <div style="position:absolute;top:3%;left: 3%;width: 95%;height: 94%;" id="threeChart1"></div>
            </div>
            <div style="width: 30%;height: 100%;position: relative;">
              <dv-border-box-9 :color="['#2d5cac']"></dv-border-box-9>
              <div style="font-size: 20px;color: #FFFFFF;position: absolute;top: 3%;left: 47%;">表格标题</div>
              <div style="position:absolute;top:12%;left: 3%;width: 95%;height: 84%;">
                <dv-scroll-board :config="config" style="width:100%;height:100" />
              </div>
            </div>
       </div>
       <div style="width: 100%;height: 40%;display: flex;">
         <div style="width: 33.33%;height: 100%;position: relative;">
           <dv-border-box-9 :color="['#2d5cac']"></dv-border-box-9>
            <div style="position:absolute;top:3%;left: 3%;width: 95%;height: 94%;" id="threeChart2"></div>
         </div>

           <div style="width: 33.33%;height: 100%;position: relative;">
             <dv-border-box-9 :color="['#2d5cac']"></dv-border-box-9>
             <div style="position:absolute;top:3%;left: 3%;width: 95%;height: 94%;" id="threeChart4"></div>
           </div>

         <div style="width: 33.33%;height: 100%;position: relative;">
           <dv-border-box-9 :color="['#2d5cac']"></dv-border-box-9>
           <div style="position:absolute;top:3%;left: 3%;width: 95%;height: 94%;" id="threeChart3"></div>
         </div>
       </div>
     </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        threeChart1:"",
        threeChart2:"",
        threeChart3:"",
        threeChart4:"",
        options: [{
          value: '1',
          label: '2021'
        }, {
          value: '2',
          label: '2020'
        }],
        value: '1',
        config:{
          header: ['列1', '列2', '列3'],
            data: [
              ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
              ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
              ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
              ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
              ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
              ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
              ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
              ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
              ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
              ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
            ],
            index: true,
            columnWidth: [50],
             align: ['center', 'center', 'center', 'center'],
        }


      }
    },
    methods:{
      drawChart1(){
        var option={
          title: {
                 text: '干的漂亮',
                 textStyle: {
                     align: 'center',
                     color: '#fff',
                     fontSize: 20,
                 },
                 top: '1%',
                 left: 'left',
             },
           backgroundColor: '#00000000',
              tooltip: {
                  trigger: "axis",
                  axisPointer: {
                      type: "shadow",
                      label: {
                          show: true
                      }
                  }
              },
              grid: {
                  left: "4%",
                  top: "20%",
                  right: "5%",
                  bottom: "12%"
              },
              legend: {
                  data: ["昨日总人数", "今日实时人数", "昨日使用率"],
                  top: "4%",
                  textStyle: {
                      color: "#1FC3CE",
                      fontSize: 14
                  }
              },
              xAxis: {
                  data: [
                      "会议室1",
                      "会议室2",
                      "会议室3",
                      "会议室4",
                      "会议室5",
                      "会议室6",
                      "会议室7",
                      "会议室8",
                      "会议室9",
                      "会议室10",
                      "会议室11",
                      "会议室12"
                  ],
                  axisLine: {
                      show: true, //隐藏X轴轴线
                      lineStyle: {
                          color: "#3d5269",
                          width: 1
                      }
                  },
                  axisTick: {
                      show: true, //隐藏X轴刻度
                      alignWithLabel: true
                  },
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: "#396A87", //X轴文字颜色
                          fontSize: 14
                      },
                      interval: 0,
                      rotate: 30
                  }
              },
              yAxis: [{
                      type: "value",
                      name: "人数",
                      nameTextStyle: {
                          color: "#396A87",
                          fontSize: 14
                      },
                      splitLine: {
                          show: true,
                          lineStyle: {
                              width: 1,
                              color: "#3d5269"
                          }
                      },
                      axisTick: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#396A87",
                              fontSize: 14
                          }
                      }
                  },
                  {
                      type: "value",
                      name: "使用率%",
                      nameTextStyle: {
                          color: "#396A87",
                          fontSize: 14
                      },
                      position: "right",
                      splitLine: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      },
                      axisLine: {
                          show: false,
                          lineStyle: {
                              color: "#396A87",
                              width: 2
                          }
                      },
                      axisLabel: {
                          show: true,
                          formatter: "{value} %", //右侧Y轴文字显示
                          textStyle: {
                              color: "#396A87",
                              fontSize: 14
                          }
                      }
                  }
              ],
              series: [{
                      name: "昨日总人数",
                      type: "bar",
                      barWidth: 18,
                      itemStyle: {
                          normal: {
                              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                      offset: 0,
                                      color: "#00FFFF"
                                  },
                                  {
                                      offset: 1,
                                      color: "#0080FF"
                                  }
                              ])
                          }
                      },
                      data: [24, 45, 43, 35, 76, 154, 86, 42, 68, 97, 24, 34]
                  },
                  {
                      name: "今日实时人数",
                      type: "bar",
                      barWidth: 18,
                      itemStyle: {
                          normal: {
                            color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                      offset: 0,
                                      color: "#E29052"
                                  },
                                  {
                                      offset: 1,
                                      color: "#FA5A53"
                                  }
                            ])

                          }
                      },
                      data: [133, 23, 114, 67, 89, 35, 67, 96, 90, 46, 75, 85]
                  },
                  {
                      name: "昨日使用率",
                      type: "line",
                      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                      showAllSymbol: true, //显示所有图形。
                      symbol: "circle", //标记的图形为实心圆
                      symbolSize: 6, //标记的大小
                      itemStyle: {
                          //折线拐点标志的样式
                          color: "#26D9FF",
                          borderColor: "#26D9FF",
                          width: 2,
                          shadowColor: "#26D9FF",
                          shadowBlur: 2
                      },
                      lineStyle: {
                          color: "#26D9FF",
                          width: 2,
                          shadowBlur: 2
                      },
                      data: [4.2, 3.5, 2.9, 7.8, 2, 3, 4.2, 3.5, 2.9, 7.8, 2, 3]
                  }
              ]
        }
        this.threeChart1 = this.$echarts.init(document.getElementById('threeChart1'))

        // 绘制图表
        this.threeChart1.setOption(option);
      },
      drawChart2(){
        var placeHolderStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: "rgba(0,0,0,0)",
                borderWidth: 0
            },
            emphasis: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0
            }
        };


        var dataStyle = {
            normal: {
                formatter: '超越{c}%',
                position: 'center',
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'normal',
                    color: '#AAAFC8'
                }
            }
        };


        var option = {
            backgroundColor: "#00000000",
            title: [{
                text: 'CPU',
                left: '20%',
                top: '60%',
                textAlign: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: '20',
                    color: '#fff',
                    textAlign: 'center',
                },
            }, {
                text: '内存',
                left: '50%',
                top: '60%',
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: '20',
                    textAlign: 'center',
                },
            }, {
                text: '硬盘',
                left: '80%',
                top: '60%',
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: '20',
                    textAlign: 'center',
                },
            }],

            //第一个图表
            series: [{
                    type: 'pie',
                    hoverAnimation: false, //鼠标经过的特效
                    radius: ['50%', '55%'],
                    center: ['20%', '50%'],
                    startAngle: 225,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                            value: 100,
                            itemStyle: {
                                normal: {
                                    color: ['rgba(176, 212, 251, 0.3)']
                                }
                            },
                        }, {
                            value: 35,
                            itemStyle: placeHolderStyle,
                        },

                    ]
                },
                //上层环形配置
                {
                    type: 'pie',
                    hoverAnimation: false, //鼠标经过的特效
                    radius: ['50%', '55%'],
                    center: ['20%', '50%'],
                    startAngle: 225,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                            value: 75,
                            "itemStyle": {
                                "normal": {
                                    "color": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        "offset": 0,
                                        "color": '#00cefc'
                                    }, {
                                        "offset": 1,
                                        "color": '#367bec'
                                    }]),
                                }
                            },
                            label: dataStyle,
                        }, {
                            value: 35,
                            itemStyle: placeHolderStyle,
                        },

                    ]
                },


                //第二个图表
                {
                    type: 'pie',
                    hoverAnimation: false,
                    radius: ['50%', '55%'],
                    center: ['50%', '50%'],
                    startAngle: 225,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                            value: 100,
                            itemStyle: {
                                normal: {
                                    color: ['rgba(176, 212, 251, 0.3)']
                                }
                            },

                        }, {
                            value: 35,
                            itemStyle: placeHolderStyle,
                        },

                    ]
                },

                //上层环形配置
                {
                    type: 'pie',
                    hoverAnimation: false,
                    radius: ['50%', '55%'],
                    center: ['50%', '50%'],
                    startAngle: 225,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                            value: 30,
                            "itemStyle": {
                                "normal": {
                                    "color": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        "offset": 0,
                                        "color": '#9FE6B8'
                                    }, {
                                        "offset": 1,
                                        "color": '#32C5E9'
                                    }]),
                                }
                            },
                            label: dataStyle,
                        }, {
                            value: 55,
                            itemStyle: placeHolderStyle,
                        },

                    ]
                },
                //第三个图表
                {
                    type: 'pie',
                    hoverAnimation: false,
                    radius: ['50%', '55%'],
                    center: ['80%', '50%'],
                    startAngle: 225,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                            value: 100,
                            itemStyle: {
                                normal: {
                                    color: ['rgba(176, 212, 251, 0.3)']
                                }
                            },

                        }, {
                            value: 35,
                            itemStyle: placeHolderStyle,
                        },

                    ]
                },

                //上层环形配置
                {
                    type: 'pie',
                    hoverAnimation: false,
                    radius: ['50%', '55%'],
                    center: ['80%', '50%'],
                    startAngle: 225,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                            value: 65,
                            "itemStyle": {
                                "normal": {
                                    "color": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        "offset": 0,
                                        "color": '#FDFF5C'
                                    }, {
                                        "offset": 1,
                                        "color": '#FFDB5C'
                                    }]),
                                }
                            },
                            label: dataStyle,
                        }, {
                            value: 55,
                            itemStyle: placeHolderStyle,
                        },

                    ]
                },
            ]
        };
        this.threeChart2 = this.$echarts.init(document.getElementById('threeChart2'))

        // 绘制图表
        this.threeChart2.setOption(option);
      },
      drawChart3(){
        let dataMax = 60;
              const source = {
                data: [43, 10, 28, 35, 50, 19, 13],
                indicator: [
                  { name: '家政服务', max: dataMax},
                  { name: '助餐服务', max: dataMax},
                  { name: '助医服务', max: dataMax},
                  { name: '待办服务', max: dataMax},
                  { name: '交谈服务', max: dataMax},
                  { name: '康复服务', max: dataMax},
                  { name: '助行服务', max: dataMax},
                ]
              }
              const buildSeries = function(data){
                const helper = data.map((item, index) => {
                  const arr = new Array(data.length);
                  arr.splice(index, 1, item);
                  return arr;
                })

                return [data, ...helper].map((item, index) => {
                  return {
                    type: 'radar',
                    itemStyle: {
                      color: '#31e586'
                    },
                    lineStyle: {
                      color: index === 0 ? '#31e586' : 'transparent'
                    },
                    areaStyle: {
                      color: index === 0 ? '#31e586' : 'transparent',
                      opacity: 0.3
                    },
                    tooltip: {
                      show: index === 0 ? false : true,
                      formatter: function() {
                        return source.indicator[index - 1].name + '不满意度：' + source.data[index - 1]+'%';
                      }
                    },
                    z: index === 0 ? 1 : 2,
                    data: [item]
                  }
                })
              }


             var option = {
                backgroundColor: '#00000000',
                 title: {
                        text: '哎呦,不错哦',
                        textStyle: {
                            align: 'center',
                            color: '#fff',
                            fontSize: 20,
                        },
                        top: '1%',
                        left: 'left',
                    },
                tooltip: {},
                radar: {
                  // shape: 'circle',
                  name: {
                    textStyle: {
                      fontSize: 22,
                      color: ['#d1dbf2'],
                      padding: [3, 5]
                    }
                  },
                  splitNumber: 4,
                  splitArea: {
                    show: true,
                    areaStyle: {
                      color: ['rgba(12,62,129,0)','rgba(12,62,129,0.3)','rgba(12,62,129,0)','rgba(12,62,129,0)']
                    }
                  },
                  splitLine: {
                    lineStyle: {
                      color: '#0c3e81'
                    }
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#0c3e81'
                    }
                  },
                  indicator: source.indicator
                },
                series: buildSeries(source.data)
              };
        this.threeChart3 = this.$echarts.init(document.getElementById('threeChart3'))

        // 绘制图表
        this.threeChart3.setOption(option);
      },
      drawChart3(){
        let dataMax = 60;
              const source = {
                data: [43, 10, 28, 35, 50, 19, 13],
                indicator: [
                  { name: '家政服务', max: dataMax},
                  { name: '助餐服务', max: dataMax},
                  { name: '助医服务', max: dataMax},
                  { name: '待办服务', max: dataMax},
                  { name: '交谈服务', max: dataMax},
                  { name: '康复服务', max: dataMax},
                  { name: '助行服务', max: dataMax},
                ]
              }
              const buildSeries = function(data){
                const helper = data.map((item, index) => {
                  const arr = new Array(data.length);
                  arr.splice(index, 1, item);
                  return arr;
                })

                return [data, ...helper].map((item, index) => {
                  return {
                    type: 'radar',
                    itemStyle: {
                      color: '#31e586'
                    },
                    lineStyle: {
                      color: index === 0 ? '#31e586' : 'transparent'
                    },
                    areaStyle: {
                      color: index === 0 ? '#31e586' : 'transparent',
                      opacity: 0.3
                    },
                    tooltip: {
                      show: index === 0 ? false : true,
                      formatter: function() {
                        return source.indicator[index - 1].name + '不满意度：' + source.data[index - 1]+'%';
                      }
                    },
                    z: index === 0 ? 1 : 2,
                    data: [item]
                  }
                })
              }


             var option = {
                backgroundColor: '#00000000',
                 title: {
                        text: '哎呦,不错哦',
                        textStyle: {
                            align: 'center',
                            color: '#fff',
                            fontSize: 20,
                        },
                        top: '1%',
                        left: 'left',
                    },
                tooltip: {},
                radar: {
                  // shape: 'circle',
                  name: {
                    textStyle: {
                      fontSize: 22,
                      color: ['#d1dbf2'],
                      padding: [3, 5]
                    }
                  },
                  splitNumber: 4,
                  splitArea: {
                    show: true,
                    areaStyle: {
                      color: ['rgba(12,62,129,0)','rgba(12,62,129,0.3)','rgba(12,62,129,0)','rgba(12,62,129,0)']
                    }
                  },
                  splitLine: {
                    lineStyle: {
                      color: '#0c3e81'
                    }
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#0c3e81'
                    }
                  },
                  indicator: source.indicator
                },
                series: buildSeries(source.data)
              };
        this.threeChart3 = this.$echarts.init(document.getElementById('threeChart3'))

        // 绘制图表
        this.threeChart3.setOption(option);
      },
      drawChart4(){
        var that=this
       let index = 0;
       var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
       function fun() {
               var timer = setInterval(function() {
                that.threeChart4.dispatchAction({
                   type: 'hideTip',
                   seriesIndex: 0,
                   dataIndex: index
               });
               // 显示提示框
               that.threeChart4.dispatchAction({
                   type: 'showTip',
                   seriesIndex: 0,
                   dataIndex: index
               });
               // 取消高亮指定的数据图形
               that.threeChart4.dispatchAction({
                   type: 'downplay',
                   seriesIndex: 0,
                   dataIndex: index == 0? 5 : index -1
               });
                that.threeChart4.dispatchAction({
                   type: 'highlight',
                   seriesIndex: 0,
                   dataIndex: index
               });
               index++;
               if (index > 5) {
                   index = 0;
               }
           },3000)
       }

           fun()
       setTimeout(function() {fun()}, 5000);


             var option = {

                 title: {
                       text: 'pieChart',
                       x: 'center',
                       y: 'center',
                       textStyle: {
                         color:'#fff',
                           fontSize: 20
                       }
                   },
                   tooltip: {
                       trigger: 'item'
                   },
                   series: [{
                       type: 'pie',
                       center: ['50%', '50%'],
                       radius: ['44%', '65%'],
                       clockwise: true,
                       avoidLabelOverlap: true,
                       hoverOffset: 15,
                       itemStyle: {
                           normal: {
                               color: function(params) {
                                   return colorList[params.dataIndex]
                               }
                           }
                       },
                       label: {
                           show: true,
                           position: 'outside',
                           formatter: '{a|{b}：{d}%}\n{hr|}',
                           rich: {
                               hr: {
                                   /*
                           再次声明一下，大家在这里修改之后不要点击上面的保存！
                   不要点击保存！不要点击保存！重要的事情说三遍！
                   你的修改会覆盖我的原代码的！感谢理解！
                                               --2020/8/4  by--suwanqing
                                   */
                                   backgroundColor: 't',
                                   borderRadius: 3,
                                   width: 3,
                                   height: 3,
                                   padding: [3, 3, 0, -12]
                               },
                               a: {
                                   padding: [-30, 15, -20, 15]
                               }
                           }
                       },
                       labelLine: {
                           normal: {
                               length: 20,
                               length2: 30,
                               lineStyle: {
                                   width: 1
                               }
                           }
                       },
                       data: [{
                           'name': '一月',
                           'value': 1.45
                       }, {
                           'name': '二月',
                           'value': 2.93
                       }, {
                           'name': '三月',
                           'value': 3.15
                       }, {
                           'name': '四月',
                           'value': 4.78
                       }, {
                           'name': '五月',
                           'value': 5.93
                       }, {
                           'name': '六月',
                           'value': 5.73
                       }
                       ],
                   }]
              };
        this.threeChart4 = this.$echarts.init(document.getElementById('threeChart4'))

        // 绘制图表
        this.threeChart4.setOption(option);
      }
    },
    mounted() {
        this.drawChart1()
        this.drawChart2()
        this.drawChart3()
        this.drawChart4()
    }
  }
</script>
<style>
  html {
    width: 100%;
    height: 100%;
  }

  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .el-input__inner{
    background-color: #142031 !important;
    border: 1px #142031 solid;
  }
  .el-select-dropdown{
    background-color: #142031 !important;
  }
  .el-select-dropdown_item hover{
    background-color: #142031 !important;

  }

  .contentthree {
    width: 100%;
    height: 100%;
    background-size:100% 100%;
    background: url(../../static/index_bg.png);
  }
</style>
